<style>

    .template_detail_container{
        padding: 0;
        background: #fff;
    }

    .template_detail {
        width: 80%;
        min-width: 600px;
        margin: 0 auto;
        padding: 40px 20px;
        background: #fff;
    }

    .template_detail_title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }

    .template_detail_info {
        font-size: 12px;
        text-align: center;
        margin: 20px auto;
    }

    .template_detail_content {
    }

    .template_field_split {
        height: 20px;
        font-size: 12px;
        color: #cacaca;
        line-height: 20px;
        position: relative;
        text-align: center;
        margin: 20px 0px;
    }

    .template_field_split:before {
        content: "";
        position: relative;
        display: block;
        width: 100%;
        top: 10px;
        height: 1px;
        background: #ccc;
    }

    .template_field_split > span {
        display: inline-block;
        height: 20px;
        background: #fff;
        position: relative;
        padding: 0 12px;
    }

    .template_detail_info {
        color: #545454;
    }

    .template_detail_info > span {
        margin: 0 5px;
    }

    .template_detail_field_title {
        color: #cacaca;
    }

    .template_detail_content img {
        max-width: 100%;
    }

    .template_detail .layui-carousel img {
        max-height: 600px;
        max-width: 100%;
        vertical-align: middle;
    }

    .template_detail .layui-carousel .preview-imgs > div {
        text-align: center;
        line-height: 600px;
    }
    .template_detail .layui-carousel .preview-imgs > div{
        background: #156f63;
    }


</style>

<div class="layui-fluid template_detail_container">
    <div class="template_detail">
        <div class="template_detail_title">#(detail.template_name)</div>
        <div class="template_detail_info">
            <span class="template_detail_field_title">创建时间</span><span>#date(detail.create_datetime,'yyyy-MM-dd HH:mm:ss')</span>
            <span class="template_detail_field_title">关联表数</span><span>#(detail.table_require_count)</span>
            <span class="template_detail_field_title">发布者</span><span>#(detail.author)</span>
            <span class="template_detail_field_title">版本号</span><span>#(detail.version)</span>
        </div>
        <div class="template_field_split template-preview"><span>预览图</span></div>
        <div class="layui-carousel" id="template-preview-img">
            <div class="preview-imgs" carousel-item="">

            </div>
        </div>
        <div class="template_field_split"><span>模板描述</span></div>
        <div class="template_detail_content">#(detail.desc)</div>
    </div>
</div>
<!-- JS脚本区 -->
<script>
    layui.use(['admin', 'carousel', 'form', 'jquery'], function () {
        var carousel = layui.carousel;
        var $ = layui.$;
        let thumbs = #(detail.thumb ?? '[]');
        if (thumbs && thumbs.length > 0) {
            let html = '';
            thumbs.forEach(function (item) {
                html += `<div><img src="${item.file_url}"></div>`;
            });
            $("#template-preview-img .preview-imgs").html(html);
            carousel.render({
                elem: '#template-preview-img'
                , width: '100%'
                , height: '600px'
                , interval: 5000
            });
        } else {
            $(".template_field_split.template-preview").remove();
            $(".template_detail .layadmin-carousel").remove();
        }

    })
</script>